<template>
  <div>
    <h3>LifeCycle组件---{{count}}</h3>
    <button class="btn" @click="count+=1">+1</button>
  </div>
</template>

<script>
export default {
  name:'LifeCycle',
  data(){
    return{
      count:0
    }
  },
  beforeCreate(){
    // console.log(this.count);
  },
  // 应用场景发送ajax请求初始数据
  created(){
    console.log('created:组件在内存中被创建完毕了');
    console.log(this.count);
  },
  // 操作DOM元素
  mounted(){
    console.log('mounted:组件第一次被渲染到页面上');
  },
  updated(){
    console.log('updated:组件被重新渲染完毕');
  },
  unmounted(){
    console.log('unmounted:组件被销毁了');
  }
}
</script>

<style lang="less" scoped>
.btn{
  color:skyblue
}
</style>